<template>
    <div>
  <ul :class="wid ? 'pro-layeractive' : 'pro-layer' ">
     <li class="ali-product-tab" v-for="item in 13">
        <div class="ali-product-icon"></div>
        <div style="width: 80px">安全</div>
     </li>
  </ul>
    <div class="ali-product-show-more" @click="change()" v-text="what"></div>
  </div>
</template>
    
<script>

export default {
  name: 'ProLayer',
  data() {
    return{
       wid: false,
       what: "查看全部"
    }
  },
  methods: {
    change(){
        if(this.wid){
            this.wid=false
            this.what="查看全部"
        }
        else{
            this.wid=true
            this.what="收起"
        }
    }
  }
}
</script>

<style lang="stylus" scoped>
.pro-layer
    display flex
    flex-wrap wrap
    padding 0 72px
    overflow hidden
    height 262px
    animation shouqi .5s linear 1
.pro-layeractive
    display flex
    flex-wrap wrap
    padding 0 72px
    overflow hidden
    animation clic .5s linear 1
.ali-product-tab
    width 240px
    height 131px
    text-align center
    display flex
    align-items center
    flex-direction column
.ali-product-show-more
    position relative
    top 50%
    left 50%
    margin 30px 0
    transform translate(-50%,-50%)
    width 122px
    height 38px
    text-align center
    line-height 38px
    border 1px solid #000
    font-size 14px
    cursor pointer
    &:hover
        border-color #00c1de
        color #00c1de
@keyframes clic
    from
        height 262px
    to
        height 393px
@keyframes shouqi
    from
        height 393px
    to
        height 262px
@css{
.ali-product-icon {
    height: 80px;
    width: 80px;
    background-size: cover;
    background-image: url(https://img.alicdn.com/tfs/TB1EnOXQVXXXXcUXpXXXXXXXXXX-160-160.png);
    }
}
</style>
